@charset "utf-8";
@import "_iconfont.scss";

@function r($px){
    @return ($px/40)*1rem;
    
}
@function px($px){
    @return ($px/2)*1px;
    
}
img{
    display: inline-block;
}
#web{
    width: r(750);
    height: 100%;
    position: relative;
    

header{
    width: 100%;
    height:px(150);
    padding-top:1px;
    &::after{
        content: "";
        display: block;
        clear: both;
        padding-top: 1px;
    }
    >.head-logo{
       
        display: inline-block;
        width: 61.5px;
        height: 61.5px;
        overflow: hidden;
        margin-left: r(20);
        margin-top: r(15);
        
       
        img{
         width: 100%;
            margin-bottom: r(10);
        }
        }
        >.searchBar{
           
            width: r(264);
            height: 25px;
            border: 1px solid #FF9344;
            border-radius: 25px;
            margin: 0 auto;
            font-size: 0;
            padding: 0 5px;
            box-sizing: border-box;
           margin-top: 26px;
            
           
            
            
            input{
                display: inline-block;
                border: none;
              
                width: calc(100% - 18px);
                height: 100%;
                vertical-align: middle;
                border-radius: 5px;
                text-indent: 5px;
            }
            img{
                vertical-align: middle;
                width: 18px;
                height: 18px;
              
            }
        }
        >.selectBar{
            width: px(164);
            height:px(60);
            margin-top: 25px;
            border: 1px solid #FF9344;
          
            select{
                width: 100%;
                height: 100%;
                border: none;
                outline: none;
                vertical-align: top;
               -webkit-appearance: none;
               appearance: none;
               background-image: url(../img/snajiao.png);
               background-repeat: no-repeat;
               background-size: 15px 8px;
               background-position: right 6px center;
               
            }
        }
    
}
footer{
    width: r(750);
    height: 68px;
    position: absolute;
    left: 0;
    bottom: 0;
   
    
    li{
        width: 25%;
        font-size: px(26);
        text-align: center;
       
            a{ color: black;
                >.iconfont{
           color: white;
           -webkit-text-stroke: 1px #ff9344;
           font-size: r(65);
       } 
       p{
           font-size: px(26);
       }  
            }
         
        }
      
        
    
    a.active{
        >.iconfont{
            color: #ff9344;
        }
    }
}
>.session{
    position: absolute;
    top: 75px;
    bottom: px(136);
    left: 0;
    right: 0;
    overflow-y: scroll;
    //弹性滚动
    -webkit-overflow-scrolling: touch;
    >.lunbo{
        img{
            width: 100%;
            height: r(287);
        }
    }
    >.youhui{
        width: 100%;
        height: r(93);
         &::after{
                content: "";
                display: block;
                clear: both;
            }
        >.youhui-text{
            height: 100%;
            vertical-align: middle;
            &::after{
                content: "";
                display: block;
                clear: both;
            }
           >.youhui-title{
               height: 100%;
               float: left;
               vertical-align: middle;
               line-height: r(93);
               margin-left: r(20);
                &::after{
                content: "";
                display: block;
                clear: both;
            }
            img{
                width: r(57);
                height: r(57);
                  vertical-align: middle;
            }
            span{
                font-size: px(30);
            }
        } 
        >.more{
            &::after{
                content: "";
                display: block;
                clear: both;
            }
            float: right;
           line-height: r(80);
           margin-right: r(22);
            span{
                font-size: r(24);
                
            }
            img{
                width: r(27);
                height: r(27);
                position: relative;
                top: r(6);
            }
        }
        
        }
        
        
    }
    >.youhui-xiangxi{
        width: 100%;
        height:r(230) ;
        
        
          >.youhui-photo{
              width: r(650);
              height: 100%;
              margin-left: r(97);
              font-size: 0px;
        >.yh-photo1{
            display: inline-block;
                 width: r(245);
                height: r(92);
                font-size: 0px;
            img{
                width: r(245);
                height: r(92);
                margin: 0;
                font-size: 0px;
            }
        }
        >.yh-photo2{
            @extend .yh-photo1;
             margin-left: r(77);
            
        }
        >.yh-photo3{
            @extend .yh-photo1;
            margin-top: r(32);
            
        }
        >.yh-photo4{
            @extend .yh-photo1;
             margin-left: r(77);
              margin-top: r(32);
        }
    }
    }
    >.youlike{
         width: 100%;
        height: r(93);
         &::after{
                content: "";
                display: block;
                clear: both;
            }
        
           >.youlike-title{
               height: 100%;
               float: left;
               vertical-align: middle;
               line-height: r(93);
               margin-left: r(20);
                &::after{
                content: "";
                display: block;
                clear: both;
            }
            img{
                width: r(57);
                height: r(45);
                  vertical-align: middle;
            }
            span{
                font-size: r(30);
            }
        } 
        >.more{
            &::after{
                content: "";
                display: block;
                clear: both;
            }
            float: right;
           line-height: r(80);
           margin-right: r(22);
            span{
                font-size: r(24);
                
            }
            img{
                width: r(27);
                height: r(27);
                position: relative;
                top: r(6);
            }
        }
        
        
    }
    >.youlike-xiangxi{
        width: 100%;
        height: r(383);
       
        >.youlike1{
            margin-top: r(10);
            width: 100%;
            height: r(164);
            >.like-img{
                width: r(210);
                    height: r(164);
                    margin-left: r(20);
                  &::after{
                      content: "";
                      display: block;
                      clear: both;
                  }
                img{
                    width: r(210);
                    height: r(164);
                }
            }
            >.like-text{
                height: r(164);
                 width: r(490);
                display: inline-block;
                margin-left: r(23);
                >.like-p1{
                    font-size: r(30);
                    span{
                        font-size: r(22);
                        color: #8E8E8E;
                        float: right;
                        margin-top: r(31);
                        margin-right: r(10);
                        
                    } 
                    }
                    >.like-p2{
                        font-size: r(22);
                        color: #7B7B7B;
                         margin-top: r(18);
                    }
                    >.like-p3{
                        font-size: r(32);
                        color: #FFA365;
                         margin-top: r(18);
                        span{
                            font-size: r(22);
                            color: #7B7B7B;
                            float: right;
                             margin-right: r(10);
                        }
                    }
               
            }
        }
        >.youlike2{
            @extend .youlike1;
            margin-top: r(30);
        }
    }
  
}

}